<template>
    <div class="wrapper">
			<!-- header部分 -->
			<header>
				<p>确认订单</p>
			</header>
		
			<!-- 订单信息部分 -->
			<div class="order-info">
				<h5>订单配送至：</h5>
				<div class="order-info-address" >
					<p>{{deliveryaddress[0].address}}</p>
					<i class="fa fa-angle-right"></i>
				</div>
				<p>{{deliveryaddress[0].contactName}}  {{deliveryaddress[0].contactTel}}</p>
			</div>
			
			<h3>{{business.businessName}}</h3>

			<!-- 订单明细部分 -->
			<ul class="order-detailed" v-for="commodity in foodArray">
				<li v-show="commodity.quantity>0">
					<div class="order-detailed-left" >
						<img :src="commodity.foodImg">
						<p>{{commodity.foodName}} x {{commodity.quantity}}</p>
					</div>
					<p>&#165;{{commodity.quantity*commodity.foodPrice}}</p>
				</li>
			</ul>
			<div class="order-deliveryfee">
				<p>配送费</p>
				<p>&#165;{{deliveryPrice}}</p>
			</div>
			
			<!-- 合计部分 -->
			<div class="total">
				<div class="total-left">
					&#165;{{price}}
				</div>
				<div class="total-right" @click="placeOrders()">
					去支付
				</div>
			</div>
		</div>
</template>
<script>
export default {
	data() {
		return {
			user: {},
			businessId: this.$route.query.businessId,
			business: {},
			foodArray: [],
			number:{},
			deliveryPrice:{},
			price:{},
			deliveryaddress:[],
			deliveryaddressId:{},
			placeOrder:[],
			orderFood:[]
		}
	},
    created() {
		//查看SessionStorage中有没有user
		this.user = this.$getSessionStorage("user");
		// 根据businessId查询商家的信息
		this.$axios
		.post(
			"BusinessController/getBusinessById",
			this.$qs.stringify({
			businessId: this.businessId,
			})
		)
		.then(response => {
			console.log(response.data);
			this.business = response.data;
			this.deliveryPrice = response.data.deliveryPrice;
		})
		.catch(error => {
			console.log(error);
		});

		//查询的购物车信息
		this.$axios
		.post(
			"FoodController/listFoodBusinessId",
			this.$qs.stringify({
			businessId: this.businessId
			})
		)
		.then(response => {
			if (this.user != null) {
			this.listCart();
			
			}
			console.log(response.data);
			this.foodArray = response.data;
			//如果已经登录，那么需要去查询购物车中是否已经选中了某个食品

			//需要对foodArray遍历，每遍历一次就会获取到一个Food对象，然后给这个对象添加一个quantity数量并设置为初始值0
			for (let i = 0; i < this.foodArray.length; i++) {
			this.foodArray[i].quantity = 0;
			this.foodArray[i].cartId = null;
			}
		})
		.catch(error => {
			console.error(error);
		});

		//查询用户配送地址
		if (this.user != null) {
			this.$axios
			.post("OrderController/listReadUserAddress",
			this.$qs.stringify({
				userId: this.user.userId
				})
			)
			.then(response => {
				console.log(response)
				this.deliveryaddress = response.data
				this.deliveryaddressId = this.deliveryaddress[0].contactSex
			})
			.catch(error => {
				console.error(error);
			});
		}



		console.log(this.user);
		console.log(this.business);
		// console.log(this.foodArray);
	},
	methods: {
		//购物车查询功能
    	listCart() {
			this.$axios.post(
				"CartController/listCart",
				this.$qs.stringify({
					businessId: this.businessId,
					userId: this.user.userId
				})
				)
				.then(response => {
					//遍历购物车
				for (let i = 0; i < response.data.length; i++) {
					for (let a = 0; a < this.foodArray.length; a++) {
					if (response.data[i].foodId == this.foodArray[a].foodId)
						this.foodArray[a].quantity = response.data[i].quantity;
						this.foodArray[a].cartId = response.data[i].cartId;
					}
				}
				//更新页面数据
				this.sum();
				this.foodArray.sort();
				console.log(this.foodArray);
				})
				.catch(error => {
				console.log(error);
				});
			},
		//求和方法
		sum(){
			var price1 = this.deliveryPrice;
			var number1 = 0;
				for (let i = 0; i < this.foodArray.length; i++){
				price1 += (this.foodArray[i].quantity*this.foodArray[i].foodPrice);
				number1 += this.foodArray[i].quantity;
				}
			console.log(price1);
			this.price = price1;
			this.number = number1;
		},
		place(){
			for(let i = 0;i<this.foodArray.length;i++){
				let businessId = this.foodArray[i].businessId;
				let foodId = this.foodArray[i].foodId;
				let number = this.foodArray[i].quantity;
			}
			this.placeOrder =this.orderFood
			console.log(this.placeOrder);
		},
		placeOrders(){
			this.place();
			this.$axios.post(
				"OrderController/saveOrder",
				this.$qs.stringify({
					userId:this.user.userId,
					businessId:this.businessId,
					price:this.price,
					deliveryAddressId:this.deliveryaddressId,
					placeOrder:this.placeOrder
				})
				).then(response => {
					if(response.ending==1){
						this.$router.push({	
						path:'/orderList',
						query:{businessId : businessId}
						})
					}
				}).catch(error => {
				console.log(error);
				}
			);
		}
	}
	
}
</script>
<style scoped>
/****************** 总容器 ******************/
.wrapper{
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
	width: 100%;
	height: 12vw;
	background-color: #0097FF;
	color: #fff;
	font-size: 4.8vw;
	
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper .order-info{
	/*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
	width: 100%;
	margin-top: 12vw;
	background-color: #0097EF;
	box-sizing: border-box;
	padding: 2vw;
	color: #fff;
}
.wrapper .order-info h5{
	font-size: 3vw;
	font-weight: 300;
}
.wrapper .order-info .order-info-address{
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	margin: 1vw 0;
}
.wrapper .order-info .order-info-address p{
	width: 90%;
	font-size: 5vw;
}
.wrapper .order-info .order-info-address i{
	font-size: 6vw;
}
.wrapper .order-info p{
	font-size: 3vw;
}

.wrapper h3{
	box-sizing: border-box;
	padding: 3vw;
	font-size: 4vw;
	color: #666;
	border-bottom: solid 1px #DDD;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailed{
	width: 100%;
}
.wrapper .order-detailed li{
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
	
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wrapper .order-detailed li .order-detailed-left{
	display: flex;
	align-items: center;
}
.wrapper .order-detailed li .order-detailed-left img{
	width: 10vw;
	height: 10vw;
}
.wrapper .order-detailed li .order-detailed-left p{
	font-size: 3.5vw;
	margin-left: 3vw;
}
.wrapper .order-detailed li p{
	font-size: 3.5vw;
}
.wrapper .order-deliveryfee{
	width: 100%;
	height: 16vw;
	box-sizing: border-box;
	padding: 3vw;
	color: #666;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3.5vw;
}

/****************** 订单合计部分 ******************/
.wrapper .total{
	width: 100%;
	height: 14vw;
	
	position: fixed;
	left: 0;
	bottom: 0;
	
	display: flex;
}
.wrapper .total .total-left{
	flex: 2;
	background-color: #505051;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.wrapper .total .total-right{
	flex: 1;
	background-color: #38CA73;
	color: #fff;
	font-size: 4.5vw;
	font-weight: 700;
	user-select: none;
	cursor: pointer;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>